
<template>
  <div>

    <el-card shadow="never" class="border-0">
      <el-form inline>
        <el-form-item label="文本内容">
          <el-input placeholder="请输入文本内容" style="width: 200px" v-model="queryParams.content"/>
        </el-form-item>

        <el-form-item label="用户编号">
          <el-input placeholder="请输入用户编号" style="width: 200px" v-model="queryParams.userId"/>
        </el-form-item>

        <el-form-item label="审核状态">
          <el-select v-model="queryParams.auditStatus" placeholder="请选择" style="width: 200px;">
            <el-option value="1" label="待审核"></el-option>
            <el-option value="2" label="审核通过"></el-option>
            <el-option value="3" label="审核未通过"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item>
          <el-button icon="Refresh" type="info" plain @click="refReshQuery()">重置</el-button>
          <el-button icon="Search" type="primary" plain @click="getList()">搜索</el-button>
        </el-form-item>
      </el-form>

    </el-card>
    <br/>
    <el-card shadow="never" class="border-0">
      <el-table :data="AuditList" border v-loading="loading">
        <el-table-column label="序列" width="80" align="center">
          <template #default="scope">
            {{scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column prop="sysUser.userName" label="用户编号" align="center"></el-table-column>

        <el-table-column prop="content" label="文本内容" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="imgFile" label="图片文件" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="audioFile" label="音频文件" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
        <el-table-column label="审核状态" align="center">
          <template #default="scope">
            <!--            {{scope.row}}-->
            <el-tag type="primary" v-if="scope.row.auditStatus == 1">待审核</el-tag>
            <el-tag type="success"  v-if="scope.row.auditStatus == 2">审核通过</el-tag>
            <el-tag type="danger" v-if="scope.row.auditStatus == 3">审核拒绝</el-tag>
          </template>
        </el-table-column>


        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-popconfirm title="真的要删除吗?" confirmButtonText="确认" cancelButtonText="取消" @confirm="deletingById(scope.row.id)">
              <template #reference>
                <el-tag type="danger">删除</el-tag>
              </template>
            </el-popconfirm>
            &nbsp;&nbsp;
            <el-tag type="warning" @click="openEditDialog(scope.row)">编辑</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :page-size="queryParams.size" :page-sizes="[8, 16, 24,32]"
                     layout="total, sizes, prev, pager, next" :total="queryParams.total" style="float:right;">
      </el-pagination>
    </el-card>



    <el-dialog v-model="updateDialog" :title="title">
      <el-form label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="文本内容">
              <el-input placeholder="请输入文本内容" type="textarea" style="width: 240px" v-model="updateObj.content"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核状态">
              <el-select v-model="updateObj.auditStatus" placeholder="请选择状态" style="width: 180px">
                <el-option value="1" label="待审核"></el-option>
                <el-option value="2" label="审核通过"></el-option>
                <el-option value="3" label="审核拒绝"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="图片文件">
              <ImageUpload v-model="updateObj.imgFile" limit="1"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="音频内容">
              <FileUpload v-model="updateObj.audioFile"/>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-button plain type="info" @click="resetUpdateObj()">重置</el-button>
            <el-button plain type="warning" @click="submitUpdate()">提交</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>

</template>
<script setup>
//引入api接口updateGroupAudit
import {deleteAudit, getAudit,insertAudit,updateAudit} from "@/api/audit/groupaudit";

import { ElMessage } from 'element-plus';
import { onMounted ,ref,reactive} from 'vue';
import FileUpload from "@/components/FileUpload/index.vue";
// 在组件挂载时调用 getList
onMounted(() => {
  console.log(212)
  getList();
});

const queryParams = ref({
  current: 1,
  size: 10,
  total: 0,
})

// 展示数据集合
const AuditList = ref([]);

// 弹窗标题
const title = ref("");

// 新增弹窗
const insertDialog = ref(false);

// 加载状态
const loading = ref(true);

/*// 新增对象
const insertObj = reactive({
  content: "", // 文本内容
  imgFile: "", // 图片文件
  audioFile: "", // 音频文件
  createTime: "", // 创建时间
  auditStatus: "", // 审核状态
  userId: "", // 用户编号
});*/
// 修改弹窗
const updateDialog = ref(false);

// 修改对象
const updateObj = ref({
  content: "", // 文本内容
  imgFile: "", // 图片文件
  audioFile: "", // 音频文件
  createTime: "", // 创建时间
  auditStatus: "", // 审核状态
  userId: "", // 用户编号
});

const insertObj = ref({
  content: "", // 文本内容
  imgFile: "", // 图片文件
  audioFile: "", // 音频文件
  createTime: "", // 创建时间
  auditStatus: "", // 审核状态
  userId: "", // 用户编号
});

// 规则
const rules = ref({
  content: [{ required: true, message: '请输入文本内容', trigger: 'blur' }],
  imgFile: [{ required: true, message: '请输入图片文件', trigger: 'blur' }],
  audioFile: [{ required: true, message: '请输入音频文件', trigger: 'blur' }],
  createTime: [{ required: true, message: '请输入创建时间', trigger: 'blur' }],
  auditStatus: [{ required: true, message: '请输入审核状态', trigger: 'blur' }],
  userId: [{ required: true, message: '请输入用户编号', trigger: 'blur' }],
});

    //查询方法
   function getList(){
      //打开加载
      loading.value = true;
      //调用api接口
      getAudit(queryParams.value).then((res)=>{
        //关闭加载
        loading.value  = false;
        //赋值展示数据
        AuditList.value  = res.data.records;
        //赋值展示总行数
        queryParams.value .total = res.data.total;
        //弹出提示
        // 显示成功消息
        ElMessage({
          message: '加载完成',
          type: 'success',
        });
      })
    }
    //重置查询方法
function refReshQuery(){
      //重置数据
      queryParams.value.content = "";
      queryParams.value.imgFile = "";
      queryParams.value.audioFile = "";
      queryParams.value.createBy = "";
      queryParams.value.updateBy = "";
    }

    //重置修改对象
    function  resetUpdateObj(){
     console.log(454)
     updateObj.value.content = "";
     updateObj.value.imgFile = "";
     updateObj.value.audioFile = "";
     updateObj.value.createTime = "";
     updateObj.value.auditStatus = "";
     updateObj.value.userId = "";
    }
    //删除方法
function  deletingById(id){
      //调用api接口
      deleteAudit(id).then((res)=>{
        //刷新表格
        getList();
        //弹出提示
        // 显示成功消息
        ElMessage({
          message: '删除成功',
          type: 'success',
        });
      }).catch((error)=>{
        //弹出错误提示
        // 显示成功消息
        ElMessage({
          message: error,
          type: 'success',
        });
      })
    }

    //打开修改弹窗
  function  openEditDialog(ele){
    //赋值
    updateObj.value  = ele;
    if (updateObj.value.auditStatus != null && updateObj.value.reportStatus != ''){
      console.log(4444)
      updateObj.value.auditStatus = updateObj.value.auditStatus.toString();
    }
    //打开弹窗
    updateDialog.value  = true;
    //标题
    title.value  = "修改产品";
  }
    //提交修改
function  submitUpdate(){
      //调用修改接口
      updateAudit(updateObj.value).then((res)=>{
        //刷新表格
       getList();
        //关闭弹窗
        updateDialog.value  = false;
        //弹出错误提示

        // 显示成功消息
        ElMessage({
          message: '修改成功',
          type: 'success',
        });
      }).catch((error)=>{
        //弹出错误提示

        ElMessage({
          message: error,
          type: 'success',
        });
      })
    }
    //提交新增
function  submitInsert(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          //调用api接口
          insertAudit(insertObj.value).then((res)=>{
            //刷新表格
            getList().value ;
            //关闭弹窗
            insertDialog.value  = false;
          }).catch((error)=>{
            //弹出错误提示

            ElMessage({
              message: error,
              type: 'error',
            });
          })
        }else{
          //弹出错误提示
          ElMessage({
            message: '请将所有必填项进行填写',
            type: 'error',
          });
        }
      })
    }
    //页码更变
function  handleCurrentChange(index){
      //赋值数据
      queryParams.value.current = index;
      //调用查询
      getList();
    }
    //行数更变
function  handleSizeChange(size){
      //重置到第一行
      queryParams.value.current = 1;
      //赋值数据
      queryParams.value.size = size;
      //调用查询
      getList();
    }



</script>
